<template>
	<view>
		<!-- 选择工时组件 -->
		<u-popup v-model="workShow" mode="bottom" border-radius="20" :mask-close-able="false" closeable close-icon-size="40" duration="0" safe-area-inset-bottom @close="workShow = false">
			<view class="workHour_box">
				<view class="workHour_tit">选择工时</view>
				<view class="hourList_box">
					<view class="hourList_con">
						<view v-for="(item,index) in numList" :key="index"
							:class="'hourItem '+(selectName==item?'active':'')" @click="selectClick(item)">
							{{item}}{{doingType==2?'工':'时'}}
						</view>
						<view class="hourItem">
							<input type="digit" :value="newCate" @input="hourInput" placeholder="自定义" placeholder-class="placeholderColor">
						</view>
					</view>
				</view>
				<view class="handlePost_con">
					<view class="delBtn" @click="workShow = false">取 消</view>
					<view class="completeBtn" @click="confirmClick">确 定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				workShow: false,
				billType: '2',
				
				// 默认工地信息
				numList: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
				doingType: 2,
				selectName: '',
			};
		},
		created: function() {

		},
		methods: {
			// 选择工时
			selectClick(name) {
				var _this = this;
				_this.selectName = name;
				
				// 选择后直接关闭
				_this.confirmClick();
			},
			
			// 自定义标签数据
			hourInput(e) {
				this.selectName = e.detail.value;
			},
			
			// 确定操作
			confirmClick() {
				var _this = this;
				console.log('==关闭弹出框==')
				console.log('自定义工时：' + _this.selectName)
				_this.$parent.overWork = _this.selectName;
				_this.$parent.overWorkUpdate();
				_this.workShow = false;
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.workHour_box {
	}

	.workHour_tit {
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		text-align: center;
		overflow: hidden;
		margin: 30rpx 0;
	}
	
	.hourList_box{
		padding: 30rpx;
	}

	.hourList_con {
		padding: 20rpx;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

	.hourItem {
		width: 202rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		background-color: #ECEDEF;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.hourItem:nth-child(3n) {
		margin-right: 0rpx;
	}

	.hourItem.active {
		color: $uni-color-white;
		background-color: $uni-color-active;
	}

	.hourItem input {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
	}

</style>
